<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style>

            /*
             选中具有class属性的元素
             */
            [class]{
                background-color: yellow;

            }

            p[class]{
                width: 300px;
            }

            /*选中class=a的元素*/
            [class=a]{
                height: 200px;
            }

            /*
            选中class中包含a的元素
            */
            [class~=a]{
                background-color: red;
            }

            [a=b]{
                background-color: green;
            }

            /*
                选中class中以hello-开头的或者只有hello的元素
            */
            [class|="hello"]{
                width: 200px;
                height: 200px;
                background-color: black;
            }
        </style>
    </head>
    <body>
        <div class="a b" id="box">我也好</div>

        <span a ="b">你好</span>

        <p class="a">世界是美好的</p>

        <div class="hello">  </div>
    </body>
</html>